<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图书管理系统</title>
	<style type="text/css" media="screen">
		*{
			margin: 0;
			padding: 0;
		}	
		.top{
			width: 100%;
			height: 60px;
			background: rgb(100,100,100);
		}
		.center{
			height: 40px;
			width: 25%;
			margin: 20px auto;			
		}
		.center button{
			width: 60px;
			height: 40px;
			background: rgb(100,100,100);
		}
		#add{
			float: left;
		}
		#some{
			float: right;
		}
		.tab{
			width: 800px;
			margin:50px 0 0 250px;
			border-collapse: collapse;
		}
		.tab th{
			border: 1px solid skyblue;
		}
		
		.tab td{
			border: 1px solid skyblue;
			text-align: center;
		}
		.ad{
			width: 600px;
			height: 400px;
			background: #ccc;
			position: absolute;
			left: 380px;
			top: 80px;
			display: none;
		}
		.ad ul{
			list-style: none;
			width: 80%;
			height: 80%;
			margin: 0 auto;
			text-align: center;
		}
		.ad li{
			text-align: center;
			height: 20%;
			line-height: 30px;
			font-size: 25px;
			margin-top: 10px;

		}
		.ad button{
			width: 60px;
			height: 40px;
			margin-left: 260px;
		}

		.add{
			width: 600px;
			height: 400px;
			background: #ccc;
			position: absolute;
			left: 380px;
			top: 80px;
			display: none;
		}
		.yonghu{
			width: 600px;
			height: 400px;
			background: #ccc;
			position: absolute;
			left: 380px;
			top: 80px;
			display: none;
		}
		.add ul{
			list-style: none;
			width: 80%;
			height: 80%;
			margin: 0 auto;
			text-align: center;
		}
		.add li{
			text-align: center;
			height: 20%;
			line-height: 30px;
			font-size: 25px;
			margin-top: 10px;

		}
		.add button{
			width: 60px;
			height: 40px;
			margin-left: 260px;
		}
		.topr{
			width: 60px;
			height: 60px;
			background: url(user.png) no-repeat 100% 100%; 
		}
	</style>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
</head>
<body>
	<div class="top">
		<div class="topr">
			
		</div>
	</div>
	<div class="center">
		<button id="add">添加</button>
		<button id="some">刷新</button>	
	</div>
	<table class="tab">
		<thead>
			<tr>
				<td><input type="checkbox" id="#all"/></td>
				<td>书名</td>
				<td>出版社</td>
				<td>价格</td>
				<td>操作</td>
				<td></td>
			</tr>
		</thead>
		<tbody>
		
		</tbody>
	</table>
	<div class="ad">
		<ul>
			<li>书名：<input input="text" class="adbookname"></li>
			<li>出版社：<input input="text" class="addchu"></li>
			<li>图片：<input input="text" class="adimg"></li>
			<li>价格：<input input="text" class="admath"></li>
		</ul>
		<button class="adbtn">提交</button>
	</div>
	<div class="add">
		<ul>
			<li>书名：<input input="text" name="bookname"></li>
			<li>出版社：<input input="text" name="author"></li>
			<li>图片：<input input="text" name="src"></li>
			<li>价格：<input input="text" name="mach"></li>
		</ul>
		<button class="addbtn">修改</button>
	</div>
	<div class="yonghu">
		
		<button class="ybtn">注销</button>
	</div>
</body>
<script type="text/javascript">

//原生获取
// var xhr = new XMLHttpRequest();
// xhr.open('get','http://localhost:6500/books',true);
// xhr.send();
// console.log(1);
// xhr.onreadystatechange=function(){
// 	console.log(1);
// 	if(xhr.readyState==4){
// 		if(xhr.status>=200&&xhr.status<300||xhr.status==304){
// 			var data = JSON.parse(xhr.responseText);
// 			console.log(data);
// 		}
// 	}
// }

//$.ajax获取
// $.ajax({
// 	url:'http:localhost:6500/books',
// 	type:'get',
// 	success:function(data){
// 		console.log(data);
// 	}
// })

//$.getJSON获取
// $.getJSON('http:localhost:6500/books',function(data){
// 	console.log(data);
// })

//$.get获取
// $.get("http://localhost:6500/books",function(data){
// 		console.log(data);
// 	})

//传值
// var stu = {
// 		bookname:"2017002",
// 		author:"赵四",
// 		src:'images/3.jpg',
// 		mach:"18999999999"
// 	}
// $.post("http://localhost:6500/books",stu,function(data){
// 	console.log(data);
// })
var addinput = document.querySelectorAll('.add input');
var tj = document.querySelector('.addbtn');
//添加数据
$('#add').click(function(){
	$('.ad').show(1000);
	$('.adbtn').click(function(){
		$('.ad').hide(1000);
			var stu = {
			bookname:$('.adbookname').val(),
			author:$('.addchu').val(),
			src:$('.adimg').val(),
			mach:$('.admath').val()
		}
		$.post("http://localhost:6500/books",stu,function(data){
			$('.adbookname').val('');
			$('.addchu').val('');
			$('.adimg').val('');
			$('.admath').val('');
		})
	})
})

function aj(){
	// 获取数据
var baseUrl="http://localhost:6500/books";//服务端的跟路径
var xhr=new XMLHttpRequest();//创建XHR对象
/*获取后台数据*/
xhr.open("get", baseUrl);
xhr.send(null);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            createList(JSON.parse(xhr.responseText));//创建传参
            //刷新
			
        }
    }
};
}

aj();
$('#some').click(function(){
	aj();
})
//页面
function createList(data) {
	$('tbody tr').remove();
	for(var i = 0;i<data.length;i++){
	var tbody = document.querySelector('tbody');
	var tr = document.createElement('tr');
	var td1 = document.createElement('td');
	var td2 = document.createElement('td');
	var td3 = document.createElement('td');
	var td4 = document.createElement('td');
	var td5 = document.createElement('td');
	var td6 = document.createElement('td');
	var check=document.createElement("input");
	check.setAttribute("type","checkbox");
	var img=document.createElement("img");
	img.style.width='30px';
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	tr.appendChild(td5);
	tr.appendChild(td6);
	tbody.appendChild(tr);
	td1.appendChild(check);
	td4.appendChild(img);
	img.src=data[i]["src"];
	td2.textContent=data[i]["bookname"];
	td3.textContent=data[i]["author"];
	td5.textContent=data[i]["mach"];
	var a1=document.createElement("a");
    td6.appendChild(a1);
    a1.innerHTML="删除";
    a1.setAttribute('data-id',data[i]['id']);//给他添加一个id属性
    var a2=document.createElement("a");
    td6.appendChild(a2);
    a2.innerHTML="修改";
    a2.style.marginLeft="8px";
    a2.setAttribute('data-id',data[i]['id']);//给他添加一个id属性
    a2.onclick = revise;//删除
    
    a1.onclick = deldata;//修改
	}
}


//删除
function revise(){
	var baseUrl="http://localhost:6500/books";
	var xhr=new XMLHttpRequest();
	xhr.open("delete",baseUrl + "/" +this.getAttribute('data-id'));
	xhr.setRequestHeader("Content-Type","application/json");
	var obj = {};
	obj.id = this.getAttribute('data-id');
	xhr.send(JSON.stringify(obj));
    var t = this;
    console.log(t);
     xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                t.parentNode.parentNode.remove();
            }
        }
    };
}

//修改
function deldata(){
	$('.add').show(1000);
	var baseUrl="http://localhost:6500/books";
	var xhr=new XMLHttpRequest();
	var id=this.getAttribute("data-id");
	xhr.open("get",baseUrl+"/"+id);
    xhr.send(null);
    tj.setAttribute("data-id",id);
    tj.onclick=buzhi;

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                var data = null;
                data = JSON.parse(xhr.responseText);
                for(var a=0;a<addinput.length;a++){
                    var atName = addinput[a].getAttribute("name");
                    addinput[a].setAttribute("value", data[atName]);
                }
            }
        }
    }
}

function buzhi(){
	var baseUrl="http://localhost:6500/books";
	var xhr=new XMLHttpRequest();
	xhr.open("put", baseUrl + "/" + this.getAttribute("data-id"));
	xhr.setRequestHeader("Content-Type","application/json");
	var obj = {};
    obj.id = this.getAttribute("data-id");
    for(var i = 0; i < addinput.length; i++){
        obj[addinput[i].getAttribute("name")] = addinput[i].value;
    }
    xhr.send(JSON.stringify(obj));
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
               $('.add').hide(1000);
            }
        }
    }
}

// $('.topr').click(function(){
// 	$('.yonghu').show(1000);
// 	var baseUrl="http://localhost:6500/milan";
// 	var xhr=new XMLHttpRequest();
// 	xhr.open("get",baseUrl);
// 	xhr.onreadystatechange = function(){
//         if(xhr.readyState == 4){
//             if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
//                 var data = null;
//                 data = JSON.parse(xhr.responseText);
//                 for(var a=0;a<addinput.length;a++){
//                    $('<p>'+data.username+'</p><p>'+data.password+'</p>').appendTo($(".yonghu")); 
                   
//                 }
//             }
//         }
//     }
// })


//获取用户名
$('.topr').click(function(){
	$('.yonghu').show(1000);
	$.ajax({
		url:"http://localhost:6500/milan"+"/"+localStorage.dataId,
		type:"get",
		success:function(data){
			$("<P></p>").html(data.username+"&"+data.password).appendTo($('.yonghu'));
		}
	})
})

//退出登录
$(".ybtn").click(function() {
	 $.ajax({
            type:"POST",
            url:"http://localhost:6500/milan/logout",
            success:function () {
            	$('.yonghu').hide(1000);
                window.open("denglu.html")
            }
        })
	});







</script>
</html>